<template>
	<view class="i-hot" :style="[bodyStyle]">
		<view class="img e-rela" :style="[imgStyle]">
			<load-image mode="widthFix" :size="['100%']"  :src="option.img.url"></load-image>
			<view class="e-abso" v-for="(item,index) in option.img.hot" :key="index" :style="[{
				width: (item.width/9.31).toFixed(2) + '%',
				height: (item.height/5.23).toFixed(2) + '%',
				left: (item.left/9.31).toFixed(2) + '%',
				top:(item.top/5.23).toFixed(2) + '%'
			}]" @tap="jumpLink(item.link)">
				
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {computed} from 'vue'
	import {useLayoutCompoments} from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {px2rpx} from './utils'
	import type {pageLink} from './type'
	
	type hotItem = {
		link:pageLink
		name:string
		width: number
		height: number
		left: number
		top: number
	}
	
	const props = withDefaults(defineProps<{
		option : {
			img: {
				url: '',
				hot: hotItem[],
			},
			backgroundColor:string,
			paddingTop: number,
			paddingBottom: number,
			paddingX: number,
			radiusTop: number,
			radiusBottom: number,
		}
	}>(), {
		option: () => ({
			img: {
				url: '',
				hot: [],
			},
			backgroundColor: 'rgba(245, 246, 249, 1)',
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0,
		})
	})
	
	
	const ctx = useCurrentInstance()
	
	const {viewStyle:bodyStyle,jumpLink} = useLayoutCompoments(ctx,props.option)
	const imgStyle = computed(() => {
		return {borderRadius:`${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)}  ${px2rpx(props.option.radiusBottom)} ${px2rpx(props.option.radiusBottom)}`}
	})
	
</script>

<style scoped lang="scss">
	.img{
		overflow: hidden;
		// image{
		// 	width: 100%;
		// }
	}
</style>
